<template>
  <view class="content">
    <!-- 支付信息 -->
    <view :class="devtools==='ios'?'info-fa-ios':'info-fa'">
      <view class="payment-info">
        <view class="payment-info-title">支付信息</view>
        <view class="payment-info-list">
          <text>支付金额</text>
          <text class="add-weight" :style="type?'color: #DD3939':''">{{ '￥'+paymentInfo.prices }}</text>
        </view>
        <view class="payment-info-list">
          <text>订单联络人</text>
          <text>{{ paymentInfo.name }}</text>
        </view>
        <view class="payment-info-list">
          <text>联系方式</text>
          <text class="add-size">{{ paymentInfo.telephone }}</text>
        </view>
      </view>
      <!-- 商品信息自营  -->
      <view v-if="type" class="self-info">
        <!-- 商品信息 -->
        <view>
          <view style="margin-left:30rpx">商品信息</view>
          <view class="self-info-code">
            <text>{{ selfInfo.name }}</text>
            <text>{{ selfInfo.route }}</text>
          </view>
          <view class="self-info-flex">
            <text>出行时间</text>
            <text>{{ selfInfo.date | formatDate }}</text>
          </view>
          <view class="self-info-flex">
            <text>上车时间</text>
            <text>{{ selfInfo.in_time.replace('-','至') }}</text>
          </view>
          <view class="self-info-flex">
            <text>上车地点</text>
            <text>{{ selfInfo.in_car }}</text>
          </view>
        </view>
        <!-- 旅客信息 -->
        <view v-for="(item,index) in selfInfo.resource" :key="index">
          <view v-if="item.number>0" :style="index!==0?'margin-top: 40rpx;':''">
            <view class="self-passenger">
              <view class="left">
                <view>{{ item.name }}</view>
                <text>×{{ item.number }}</text>
              </view>
              <view class="right">{{ '￥'+item.stocks.price*item.number }}</view>
            </view>
            <!-- 循环旅客 -->
            <view
              v-for="value in item.list"
              :key="value.listItemIndex"
              class="self-passenger-image"
            >
              <text>{{ value.first_name }}</text>
              <view>
                <image
                  v-if="value.id_type==='GovernmentId'"
                  src="@/static/image/payment/GovernmentId.png"
                />
                <image v-else src="@/static/image/payment/Passport.png" />
                <text>{{ value.id_no }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 商品信息非自营 -->
      <view v-eles class="poduct-info">
        <view v-for="(item,index) in poductInfo" :key="index" class="poduct-info-list">
          <!-- 商品信息 -->
          <view>
            <view style="margin-left:30rpx">商品信息</view>
            <view class="poduct-info-code">
              <text>{{ item.poduct_title.code_name }}</text>
              <text>x{{ item.poduct_title.number }}</text>
            </view>
            <view v-if="query.dateTimeDisplay" class="poduct-info-time">
              <text>出行时间</text>
              <text>{{ item.poduct_title.time }}</text>
            </view>
          </view>
          <!-- 旅客信息 -->
          <view>
            <view style="margin-left:30rpx; margin-top:40rpx;margin-bottom:30rpx">旅客信息</view>
            <view v-for="(value,valueIndex) in item.guest" :key="valueIndex" class="passenger-info">
              <text>{{ value.name }}</text>
              <view>
                <!-- :src="value.id_type==='GovernmentId'?' -->
                <image
                  v-if="value.id_type==='GovernmentId'"
                  src="@/static/image/payment/GovernmentId.png"
                />
                <image v-else src="@/static/image/payment/Passport.png" />
                <text>{{ value.id_no }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 微信支付 -->
    <view :class="devtools==='ios'?'WeChat-payment-ios WeChat-payment':'WeChat-payment'">
      <button @click="payment">微信支付</button>
    </view>
  </view>
</template>
<script>
import { ticketPayment } from '@api/order'
import { set, get, deletes, has } from '@utils/storage'
import { showToast, formatDate } from '@utils/myApproach'
export default {
  filters: {
    formatDate(data) {
      return data.slice(0, 4) + ' 年 ' + data.slice(5, 7) + ' 月 ' + data.slice(8, 10) + ' 日 '
    }
  },
  onLoad(option) {
    this.query = JSON.parse(option.query)
    console.log(this.query)
    this.orderUid = option.orderUid
    this.type = option.type
    console.log('this.type', this.type)
    // 判断是否是自营商品
    if (this.type) {
      this.selfPaymentInfo()
      this.query.datetime = this.query.date
      this.query.code_name = this.query.name
    } else {
      this.getPaymentInfo()
    }
    if (has('requestPayment')) {
      deletes('requestPayment')
    }
  },
  data() {
    return {
      query: null,
      orderUid: null,
      paymentInfo: {},
      type: null,
      poductInfo: [],
      selfInfo: []
    }
  },
  computed: {
    devtools() {
      return get('devtools')
    }
  },
  methods: {
    // 计算支付信息
    getPaymentInfo() {
      // this.paymentInfo = {
      //   支付金额: this.query.number * this.query.price,
      //   订单联络人: this.query.contact.name
      //     ? this.query.contact.name
      //     : this.query.contact.last_name + this.query.contact.first_name,
      //   联系方式: this.query.contact.telephone
      // }
      this.paymentInfo = {
        prices: this.query.number * this.query.price,
        name: this.query.contact.name
          ? this.query.contact.name
          : this.query.contact.last_name + this.query.contact.first_name,
        telephone: this.query.contact.telephone
      }
      this.poductInfo = []
      if (this.query.categoryDisplay) {
        // 非套票
        this.query.ticketEntity.forEach((item) => {
          const poductInfoItem = {
            poduct_title: {
              number: null,
              code_name: item.code_name,
              time: this.query.datetime
                ? formatDate(this.query.datetime)
                : null
            },
            guest: []
          }
          item.guest.forEach((value) => {
            const guestItem = {
              name: value.name
                ? value.name
                : value.last_name + value.first_name,
              id_type: value.id_type,
              id_no: value.id_no
            }
            poductInfoItem.guest.push(guestItem)
          })
          poductInfoItem.poduct_title.number = poductInfoItem.guest.length
          this.poductInfo.push(poductInfoItem)
        })
      } else {
        // 套票
        for (var i = 0; i < this.query.number; i++) {
          const poductInfoItem = {
            poduct_title: {
              number: 1,
              code_name: this.query.code_name,
              time: this.query.datetime
                ? formatDate(this.query.datetime)
                : null
            },
            guest: []
          }
          const baseNumber = this.query.baseNumber
          for (var j = i * baseNumber; j < (i + 1) * baseNumber; j++) {
            const guestItem = {
              name: this.query.passengerList[j].name
                ? this.query.passengerList[j].name
                : this.query.passengerList[j].last_name +
                  this.query.passengerList[j].first_name,
              id_type: this.query.passengerList[j].id_type,
              id_no: this.query.passengerList[j].id_no
            }
            poductInfoItem.guest.push(guestItem)
          }
          this.poductInfo.push(poductInfoItem)
        }
      }
    },
    // 自营商品计算支付信息
    selfPaymentInfo() {
      this.paymentInfo = {
        prices: this.query.prices,
        name: this.query.contact.name,
        telephone: this.query.contact.telephone
      }
      console.log(this.query)
      this.selfInfo = {
        name: this.query.name,
        route: this.query.packages.name,
        date: this.query.date,
        in_time: this.query.packages.in_time,
        in_car: this.query.packages.in_car,
        resource: this.query.resource
      }
    },
    // 支付
    payment() {
      // 用来规避支付，直接跳到成功
      // uni.redirectTo({
      //   url: `/pages/payment/paymentSuccess?query=${JSON.stringify(this.query)}`
      // })
      var query = null
      if (has('requestPayment')) {
        query = get('requestPayment')
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: String(query.timeStamp),
          nonceStr: query.nonceStr,
          package: query.package,
          signType: query.signType,
          paySign: query.paySign,
          success: () => {
            deletes('requestPayment')
            uni.redirectTo({
              url: `/pages/payment/paymentSuccess?query=${JSON.stringify(
                this.query
              )}`
            })
          },
          fail: () => {
            showToast('未支付成功，请及时支付订单')
          }
        })
      } else {
        const orderSouce = this.type ? 'selfOrder' : 'ubrOrder'
        ticketPayment(orderSouce, this.orderUid).then((response) => {
          query = response.data.data
          set('requestPayment', response.data.data)
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: String(query.timeStamp),
            nonceStr: query.nonceStr,
            package: query.package,
            signType: query.signType,
            paySign: query.paySign,
            success: () => {
              deletes('requestPayment')
              uni.redirectTo({
                url: `/pages/payment/paymentSuccess?query=${JSON.stringify(
                  this.query
                )}`
              })
            },
            fail: () => {
              showToast('未支付成功，请及时支付订单')
            }
          })
        })
      }
    }
  }
}
</script>
<style>
.content {
  width: 750rpx;
  min-height: calc(100vh - 30rpx);
  background-color: #f7f7f7;
  padding-top: 30rpx;
}
.info-fa {
  padding-bottom: 160rpx;
}
.info-fa-ios {
  padding-bottom: 226rpx;
}
view {
  font-size: 32rpx;
  font-weight: 700;
}
text {
  font-size: 28rpx;
  font-weight: 400;
}
.add-weight {
  font-size: 32rpx;
  font-weight: 700;
}
.add-size {
  font-size: 32rpx;
}
/* 支付信息 */
.payment-info {
  width: 710rpx;
  height: 280rpx;
  margin-left: 20rpx;
  background-color: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 8rpx;
  padding-top: 30rpx;
}
.payment-info-title {
  margin-left: 30rpx;
}
.payment-info-list {
  display: flex;
  justify-content: space-between;
  margin-top: 28rpx;
  font-size: 28rpx;
}
.payment-info-list > text:nth-child(1) {
  margin-left: 30rpx;
}
.payment-info-list > text:nth-child(2) {
  margin-right: 30rpx;
}
/* 商品信息 */
.poduct-info-list {
  width: 710rpx;
  min-height: 280rpx;
  margin-left: 20rpx;
  background-color: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 8rpx;
  padding-top: 30rpx;
  margin-top: 30rpx;
  padding-bottom: 36rpx;
}
.poduct-info-code {
  font-size: 32rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.poduct-info-code > text:nth-child(1) {
  margin-left: 30rpx;
  font-size: 32rpx;
}
.poduct-info-code > text:nth-child(2) {
  margin-right: 30rpx;
  font-weight: 700;
  font-size: 32rpx;
}
.poduct-info-time {
  font-size: 32rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.poduct-info-time > text:nth-child(1) {
  margin-left: 30rpx;
}
.poduct-info-time > text:nth-child(2) {
  margin-right: 30rpx;
}

.passenger-info {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.passenger-info > text {
  margin-left: 30rpx;
  margin-top: 4rpx;
}
.passenger-info > view {
  margin-right: 30rpx;
  display: flex;
  justify-content: start;
  width: 354rpx;
}
.passenger-info > view > image {
  width: 48rpx;
  height: 48rpx;
  margin-left: 0;
}
.passenger-info > view > text {
  margin-top: 4rpx;
  margin-left: 20rpx;
}
/* 微信支付 */
.WeChat-payment {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 120rpx;
  background-color: #f7f7f7;
}
.WeChat-payment-ios {
  height: 186rpx;
}
.WeChat-payment > button {
  height: 80rpx;
  width: 710rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 700;
  margin-left: 20rpx;
  background-color: #07c160;
}
</style>
<style scoped>
/* 商品信息自营 */
.self-info {
  width: 710rpx;
  min-height: 280rpx;
  margin-left: 20rpx;
  background-color: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 8rpx;
  padding-top: 30rpx;
  margin-top: 30rpx;
  padding-bottom: 36rpx;
}
.self-info-code {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}
.self-info-code > text:nth-child(1) {
  margin-top: 30rpx;
  font-size: 32rpx;
  color: #000000;
}
.self-info-code > text:nth-child(2) {
  margin-top: 12rpx;
  font-size: 28rpx;
  color: #306de9;
  margin-bottom: 30rpx;
}
.self-info-flex {
  display: flex;
  justify-content: space-between;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-bottom: 12rpx;
  font-size: 28rpx;
}
.self-info-flex:last-child {
  padding-bottom: 30rpx;
}
/* 旅客 */
.self-passenger {
  display: flex;
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 700;
  color: #000000;
  padding-left: 30rpx;
  padding-right: 30rpx;

}

.self-passenger > .left {
  display: flex;
  justify-content: start;
}
.self-passenger > .left > text {
  margin-left: 10rpx;
  font-size: 32rpx;
  font-weight: 700;
}
.self-passenger-image {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.self-passenger-image > text {
  margin-left: 30rpx;
  margin-top: 4rpx;
}
.self-passenger-image > view {
  margin-right: 30rpx;
  display: flex;
  justify-content: start;
  width: 354rpx;
}
.self-passenger-image > view > image {
  width: 48rpx;
  height: 48rpx;
  margin-left: 0;
}
.self-passenger-image > view > text {
  margin-top: 4rpx;
  margin-left: 20rpx;
}
</style>
